<template>
  <div class="menu">
    <router-link to="/">
      <div class="menu-container">
        <div class="menu-item">
          <i class="menu-item-lable">主页</i>
        </div>
      </div>
    </router-link>
    <router-link to="second">
      <div class="menu-container">
        <div class="menu-item">
          <i class="menu-item-lable">二级页面</i>
        </div>
      </div>
    </router-link>
    <div class="menu-container transition">
      <div class="menu-item" @click="() => (showItem = !showItem)">
        <i class="menu-item-lable">导航</i>
      </div>
      <Transition mode="out-in">
        <div v-show="showItem" ref="subMenuItemRef" class="sub-menu">
          <div class="sub-menu-item">sub-menu-1</div>
          <div class="sub-menu-item">sub-menu-2</div>
          <div class="sub-menu-item">sub-menu-3</div>
        </div>
      </Transition>
    </div>
    <div class="menu-container">
      <div class="menu-item">
        <i class="menu-item-lable">导航2</i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const subMenuItemRef = ref()
const showItem = ref('false')
</script>

<style scoped>
.menu {
  color: #b2b8be;
}

.menu-item,
.sub-menu-item {
  min-height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
  margin: 0 8px;
  font-size: 13px;
}

.menu-item:hover {
  background-color: #28292a;
  color: #ffffff;
  cursor: pointer;
}

.sub-menu {
  max-width: 300px;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease-in-out;
}

.v-enter-from,
.v-leave-to {
  height: 0px;
}
</style>
